<template><div><h1 id="javascript-核心基础和常用方法" tabindex="-1"><a class="header-anchor" href="#javascript-核心基础和常用方法" aria-hidden="true">#</a> JavaScript 核心基础和常用方法</h1>
<h2 id="_1、javascript-书写位置" tabindex="-1"><a class="header-anchor" href="#_1、javascript-书写位置" aria-hidden="true">#</a> 1、JavaScript 书写位置</h2>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 1.script</span>
<span class="token comment">// 将 JavaScript 代码写在 html 文件中，例如：</span>
<span class="token operator">&lt;</span>body<span class="token operator">></span>
<span class="token operator">&lt;</span>script<span class="token operator">></span>
  <span class="token comment">// 此处写 JavaScript 代码</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">></span>

<span class="token comment">// 2. </span>
<span class="token comment">// 引入.js 格式的文件，例如：</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"此处写js文件所在的路径"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2、输出语句" tabindex="-1"><a class="header-anchor" href="#_2、输出语句" aria-hidden="true">#</a> 2、输出语句</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>alert()</td>
<td>弹出警告框</td>
</tr>
<tr>
<td>console.log()</td>
<td>控制台输出</td>
</tr>
</tbody>
</table>
<h2 id="_3、变量" tabindex="-1"><a class="header-anchor" href="#_3、变量" aria-hidden="true">#</a> 3、变量</h2>
<p>注：ES6 新增变量，会单独分类到 ES6 中</p>
<h4 id="var" tabindex="-1"><a class="header-anchor" href="#var" aria-hidden="true">#</a> var</h4>
<p>使用 var 可以声明变量<br>
例如：var num = 1;表示声明一个名称为 num，值为 1 的变量<br>
变量的合法命名规则：<br>
1.只能由数字、字母、下划线和$组成，但不能以数字开头<br>
2.不建议使用关键字和保留字<br>
3.严格区分大小写，A 和 a 是两个不同的变量</p>
<h2 id="_4、检测数据类型" tabindex="-1"><a class="header-anchor" href="#_4、检测数据类型" aria-hidden="true">#</a> 4、检测数据类型</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>typeof</td>
<td>检测值或者变量的数据类型</td>
</tr>
</tbody>
</table>
<h2 id="_5、nan-相关知识" tabindex="-1"><a class="header-anchor" href="#_5、nan-相关知识" aria-hidden="true">#</a> 5、NaN 相关知识</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>NaN</td>
<td>表示非数字，是一个特殊的数值</td>
</tr>
<tr>
<td>isNaN()</td>
<td>用来检测一个值是否为 NaN ，是的话返会 true，否则返回 false</td>
</tr>
</tbody>
</table>
<h2 id="_6、数据类型" tabindex="-1"><a class="header-anchor" href="#_6、数据类型" aria-hidden="true">#</a> 6、数据类型</h2>
<table>
<thead>
<tr>
<th>类型名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Number</td>
<td>数值类型，所有的数字不分大小、不分整浮、不分正负，都是数值类型</td>
</tr>
<tr>
<td>String</td>
<td>字符串类型，使用双引号或者单引号包裹的值</td>
</tr>
<tr>
<td>Boolean</td>
<td>布尔类型，true 表示真，false 表示假</td>
</tr>
<tr>
<td>Undefined</td>
<td>1、变量没有赋值，默认为 undefined <br/> 2、变量声明提升时，变量的值也为 undefined <br/>3、undefined 的类型也为 undefined</td>
</tr>
<tr>
<td>Null</td>
<td>null 表示空，用 typeof 检测 null，结果为 object</td>
</tr>
</tbody>
</table>
<h2 id="_7、字符串的常用属性" tabindex="-1"><a class="header-anchor" href="#_7、字符串的常用属性" aria-hidden="true">#</a> 7、字符串的常用属性</h2>
<table>
<thead>
<tr>
<th>属性名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td>表示字符串的长度</td>
</tr>
</tbody>
</table>
<h2 id="_8、字符串的常用方法" tabindex="-1"><a class="header-anchor" href="#_8、字符串的常用方法" aria-hidden="true">#</a> 8、字符串的常用方法</h2>
<table>
<thead>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>charAt()</td>
<td>获取指定位置的字符</td>
</tr>
<tr>
<td>substring()</td>
<td>提取字符串中，介于两个指定下标之间的字符</td>
</tr>
<tr>
<td>substr()</td>
<td>在字符串中指定的位置处，提取指定数目的字符</td>
</tr>
<tr>
<td>slice()</td>
<td><strong>提取字符串的某个部分，类似于 substring() ，不同之处：</strong> <br/>1、substring() 可以自动交换参数的位置，而 slice()不行<br/>2、slice()的第一个参数可以是负数，而 substring()不行</td>
</tr>
<tr>
<td>toUpperCase()</td>
<td>把字符串转换为大写</td>
</tr>
<tr>
<td>toLowerCase()</td>
<td>把字符串转换为小写</td>
</tr>
<tr>
<td>indexOf</td>
<td>返回字符串中指定字符首次出现的索引</td>
</tr>
</tbody>
</table>
<h2 id="_9、数据类型转换" tabindex="-1"><a class="header-anchor" href="#_9、数据类型转换" aria-hidden="true">#</a> 9、数据类型转换</h2>
<table>
<thead>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Number()</td>
<td>将其他类型的值转换为数字</td>
</tr>
<tr>
<td>parseInt()</td>
<td>可以将参数转成整数</td>
</tr>
<tr>
<td>parseFloat()</td>
<td>可以将参数转成浮点数</td>
</tr>
<tr>
<td>String()</td>
<td>将其他类型的值转换成字符串,例如：String(123)</td>
</tr>
<tr>
<td>toString()</td>
<td><strong>将其他类型的值转换成字符串 ，例如：(5).toString() 和 String()的区别：</strong><br/>1、toString()无法转换 null 和 undefined，String()可以转换 null 和 undefined<br/>2、toString()可增加进制参数，将字符串进行进制转换，String()不能转换进制<br/>3、写法不同，可参考上述例子</td>
</tr>
<tr>
<td>Boolean()</td>
<td>将其他类型的值转换为布尔值</td>
</tr>
</tbody>
</table>
<h2 id="_10、window-下的方法" tabindex="-1"><a class="header-anchor" href="#_10、window-下的方法" aria-hidden="true">#</a> 10、window 下的方法</h2>
<table>
<thead>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>prompt()</td>
<td>弹出输入框</td>
</tr>
</tbody>
</table>
<h2 id="_11、复杂数据类型" tabindex="-1"><a class="header-anchor" href="#_11、复杂数据类型" aria-hidden="true">#</a> 11、复杂数据类型</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>数组</td>
</tr>
<tr>
<td>Object</td>
<td>对象</td>
</tr>
<tr>
<td>Function</td>
<td>函数</td>
</tr>
</tbody>
</table>
<h2 id="_12、算术运算符" tabindex="-1"><a class="header-anchor" href="#_12、算术运算符" aria-hidden="true">#</a> 12、算术运算符</h2>
<table>
<thead>
<tr>
<th>符号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>+</td>
<td>加法运算符。加号有<strong>两种作用，分别是加法和连字符</strong><br/>1、加号两边的操作数都是数字，则为加法<br/>2、有一个操作数为字符串，则为连字符</td>
</tr>
<tr>
<td>-</td>
<td>减法运算符</td>
</tr>
<tr>
<td>*</td>
<td>乘法运算符</td>
</tr>
<tr>
<td>/</td>
<td>除法运算符</td>
</tr>
<tr>
<td>%</td>
<td>取余运算符。例如：a%b 代表 a 除以 b 的余数，8 %5 = 3</td>
</tr>
</tbody>
</table>
<h2 id="_3、number-下的方法" tabindex="-1"><a class="header-anchor" href="#_3、number-下的方法" aria-hidden="true">#</a> 3、Number 下的方法</h2>
<table>
<thead>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>toFixed()</td>
<td>指定小数点后面的位数</td>
</tr>
</tbody>
</table>
<h2 id="_14、math-方法" tabindex="-1"><a class="header-anchor" href="#_14、math-方法" aria-hidden="true">#</a> 14、Math 方法</h2>
<table>
<thead>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Math.pow(x,y)</td>
<td>返回 x 的 y 次幂（不常用，了解即可）</td>
</tr>
<tr>
<td>Math.sqrt()</td>
<td>返回一个数的平方根（不常用，了解即可）</td>
</tr>
<tr>
<td>Math.ceil()</td>
<td>向上取整</td>
</tr>
<tr>
<td>Math.floor()</td>
<td>向下取整</td>
</tr>
</tbody>
</table>
<h2 id="_15、关系运算符" tabindex="-1"><a class="header-anchor" href="#_15、关系运算符" aria-hidden="true">#</a> 15、关系运算符</h2>
<table>
<thead>
<tr>
<th>符号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&gt;</td>
<td>大于</td>
</tr>
<tr>
<td>&lt;</td>
<td>小于</td>
</tr>
<tr>
<td>&gt;=</td>
<td>大于等于</td>
</tr>
<tr>
<td>&lt;=</td>
<td>小于等于</td>
</tr>
<tr>
<td>==</td>
<td>等于</td>
</tr>
<tr>
<td>!=</td>
<td>不等于</td>
</tr>
<tr>
<td>===</td>
<td>全等于</td>
</tr>
<tr>
<td>!==</td>
<td>不全等于</td>
</tr>
</tbody>
</table>
<h2 id="_16、逻辑运算符" tabindex="-1"><a class="header-anchor" href="#_16、逻辑运算符" aria-hidden="true">#</a> 16、逻辑运算符</h2>
<table>
<thead>
<tr>
<th>符号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>!</td>
<td>非</td>
</tr>
<tr>
<td>&amp;&amp;</td>
<td>与</td>
</tr>
<tr>
<td>||</td>
<td>或</td>
</tr>
</tbody>
</table>
<h2 id="_17、赋值运算符" tabindex="-1"><a class="header-anchor" href="#_17、赋值运算符" aria-hidden="true">#</a> 17、赋值运算符</h2>
<table>
<thead>
<tr>
<th>符号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>=</td>
<td>赋值</td>
</tr>
<tr>
<td>+=</td>
<td>快捷赋值，例如： a+=1 等价与 a=a+1</td>
</tr>
<tr>
<td>-=</td>
<td>快捷赋值，例如： a-=1 等价与 a=a-1</td>
</tr>
<tr>
<td>*=</td>
<td>快捷赋值，例如： a*=1 等价与 a=a*1</td>
</tr>
<tr>
<td>/=</td>
<td>快捷赋值，例如： a/=1 等价与 a=a/1</td>
</tr>
<tr>
<td>%=</td>
<td>快捷赋值，例如： a%=1 等价与 a=a%1</td>
</tr>
<tr>
<td>++</td>
<td><strong>自增运算</strong> ，例如：<br/>var num1 = 3;<br/>num1++<br/>console.log(num1) // num 的值为 4</td>
</tr>
<tr>
<td>--</td>
<td><strong>自减运算</strong>，例如：<br/>var num2 = 3;<br/>num2--<br/>console.log(num2) // num2 的值为 2</td>
</tr>
</tbody>
</table>
<h2 id="_18、条件语句" tabindex="-1"><a class="header-anchor" href="#_18、条件语句" aria-hidden="true">#</a> 18、条件语句</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>if</td>
<td>当指定条件为 true 时，执行 if 语句对应的代码</td>
</tr>
<tr>
<td>if...else</td>
<td>当条件为 true 时，执行 if 语句对应的代码<br/>当条件为 false 时，执行 else 语句对应的代码</td>
</tr>
<tr>
<td>if...else if...</td>
<td>满足条件时，执行它所对应的代码</td>
</tr>
<tr>
<td>case</td>
<td>在 switch 中使用，表示要匹配的每一种情况</td>
</tr>
<tr>
<td>default</td>
<td>在 switch 中使用，表示默认情况，当不满足所有的 case 条件时，会执行默认情况</td>
</tr>
<tr>
<td>switch</td>
<td><strong>根据不同的条件来执行不同的动作</strong>。示例：<br/>switch (month) {<br/>case 1:<br/>alert(&quot;这个月有 31 天&quot;)<br/>break;<br/>case 4:<br/>alert(&quot;这个月有 30 天&quot;)<br/>break;<br/>default:<br/>alert(&quot;请输入正确的月份！！&quot;)<br/>}</td>
</tr>
<tr>
<td>boolean_expression ? true_value : false_value</td>
<td>三元运算符，当条件表达式 boolean_expression 为真，执行表达式 true_value，为假时执行表达式 false_value</td>
</tr>
</tbody>
</table>
<h2 id="_19、循环语句" tabindex="-1"><a class="header-anchor" href="#_19、循环语句" aria-hidden="true">#</a> 19、循环语句</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>for</td>
<td><strong>循环执行一段代码</strong>，示例：for(var i = 0; i &lt;10;i++) {<br/>console.log(i);<br/>}</td>
</tr>
<tr>
<td>while</td>
<td>条件为真时循环执行代码块</td>
</tr>
<tr>
<td>do-while</td>
<td><strong>while 循环的变体</strong>，语法：<br/>do{<br/>循环体<br/>}while(循环执行条件)<br/><strong>注意事项：</strong><br/>1、do-while 循环在检查条件之前一定会执行一次循环体<br/>2、如果条件为真，就会继续执行循环体<br/>3、如果条件为假，则会终止循环</td>
</tr>
</tbody>
</table>
<h2 id="_20、break-和-continue-语句" tabindex="-1"><a class="header-anchor" href="#_20、break-和-continue-语句" aria-hidden="true">#</a> 20、break 和 continue 语句</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>break</td>
<td><strong>用于退出循环</strong><br/>1、在 switch 中使用，用于跳出 switch 语句<br/>2、在循环 for、while 中使用，直接跳出循环</td>
</tr>
<tr>
<td>continue</td>
<td>跳出当前循环，继续执行下一次循环</td>
</tr>
</tbody>
</table>
<h2 id="_21、数组的定义" tabindex="-1"><a class="header-anchor" href="#_21、数组的定义" aria-hidden="true">#</a> 21、数组的定义</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>数组， 用来存储一组值</td>
</tr>
<tr>
<td>new</td>
<td><strong>与 Array 结合使用，创建数组</strong>，示例：new Array()<br/>（new 是 JavaScript 中的一个关键字，用来实例化对象的，后面的面向对象章节中会有详细的讲解，目前了解即可）</td>
</tr>
</tbody>
</table>
<h2 id="_22、数组类型的判断" tabindex="-1"><a class="header-anchor" href="#_22、数组类型的判断" aria-hidden="true">#</a> 22、数组类型的判断</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array.isArray()</td>
<td>检测数据是否是一个数组，返回布尔值</td>
</tr>
</tbody>
</table>
<h2 id="_23、数组常用的属性" tabindex="-1"><a class="header-anchor" href="#_23、数组常用的属性" aria-hidden="true">#</a> 23、数组常用的属性</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td>返回数组长度</td>
</tr>
</tbody>
</table>
<h2 id="_24、数组的常用方法" tabindex="-1"><a class="header-anchor" href="#_24、数组的常用方法" aria-hidden="true">#</a> 24、数组的常用方法</h2>
<table>
<thead>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>push()</td>
<td>在尾部插入新项</td>
</tr>
<tr>
<td>pop()</td>
<td>删除数组的最后一项</td>
</tr>
<tr>
<td>unshift()</td>
<td>在头部插入新项</td>
</tr>
<tr>
<td>shift()</td>
<td>删除数组的第一项</td>
</tr>
<tr>
<td>splice()</td>
<td>用于添加或删除数组的元素</td>
</tr>
<tr>
<td>slice()</td>
<td>从已有的数组中返回选定的元素</td>
</tr>
<tr>
<td>concat()</td>
<td>合并多个数组</td>
</tr>
<tr>
<td>reverse()</td>
<td>颠倒数组中元素的顺序</td>
</tr>
<tr>
<td>indexOf()</td>
<td>返回指定元素的索引值，如果不存在返回-1</td>
</tr>
<tr>
<td>includes()</td>
<td>判断一个数组是否包含指定的值，返回布尔值</td>
</tr>
<tr>
<td>sort()</td>
<td>用于数组排序（涉及到函数知识，在函数一节再进行详细的讲解）</td>
</tr>
<tr>
<td>join()</td>
<td>将数组转成字符串</td>
</tr>
</tbody>
</table>
<h2 id="_25、字符串的常用方法" tabindex="-1"><a class="header-anchor" href="#_25、字符串的常用方法" aria-hidden="true">#</a> 25、字符串的常用方法</h2>
<table>
<thead>
<tr>
<th>方法名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>split()</td>
<td>将字符串转成数组</td>
</tr>
</tbody>
</table>
</div></template>


